<template>
  <view>
    <view class="header">
      <view class="bg"></view>
      <Navbar
        title="停车场信息管理系统"
        backgroundColor="transparent"
        color="#fff"
        :fixed="false"
      />
      <view class="header__box index-swiper">
        <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="false"
          :circular="true"
        >
          <swiper-item class="swiper__item">
            <image
              class="swiper__image"
              src="http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg"
            />
          </swiper-item>
          <swiper-item class="swiper__item">
            <image
              class="swiper__image"
              src="http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg"
            />
          </swiper-item>
          <swiper-item class="swiper__item">
            <image
              class="swiper__image"
              src="http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg"
            />
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="content">
      <view class="tools">
        <view @tap="stopCar" class="tools__item">
          <image class="tools__img" src="~@/static/index/pay.png" />
          <text>缴纳费用</text>
        </view>
        <view @tap="reservation" class="tools__item">
          <image class="tools__img" src="~@/static/index/vr.png" />
          <text>预约服务</text>
        </view>
        <view @tap="map" class="tools__item">
          <image class="tools__img" src="~@/static/index/map.png" />
          <text>附近地图</text>
        </view>
        <view @tap="feedback" class="tools__item">
          <image class="tools__img" src="~@/static/index/feedback.png" />
          <text>用户反馈</text>
        </view>
      </view>
      <view class="news">
        <view class="yd-flex-1">
          <view class="news__title yd-clamp-2"
            >小公园广场烟花绚丽绽放，热闹非凡，暗夜犹如白天一样光明，人们喜笑颜开，....</view
          >
          <view
            >孟雨发布<text style="margin-left: 12rpx">2022/08/15</text></view
          >
        </view>
        <image
          class="news__img"
          src="https://img.lovepik.com/photo/20211119/large/lovepik-new-years-fireworks-background-picture_500220088.jpg"
          mode="scaleToFill"
        />
      </view>
      <view class="shop">
        <view class="shop__title yd-clamp-1"
          >餐饮小吃，上新啦！！！肉多菜多，现炒量大~</view
        >
        <image
          class="shop__img"
          src="~@/static/temp/2.jpg"
          mode="scaleToFill"
        />
      </view>
      <view class="shop">
        <view class="shop__title yd-clamp-1">阳澄湖大闸蟹上市啦！！！</view>
        <image
          class="shop__img"
          src="~@/static/temp/3.png"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
import share from "@/utils/share.js";
export default {
  data() {
    return {
      shopData: [
        {
          title:
            "餐饮快餐小吃产品-上新啦！！！肉多菜多，现炒量大，加量不加价。",
          img: "https://hellorfimg.zcool.cn/preview260/2228705033.jpg?x-oss-process=image/format,webp",
        },
        {
          title: "新店开张！消费满300元减50元，送开店餐品。",
          img: "https://hellorfimg.zcool.cn/provider_image/preview260/2239388308.jpg?x-oss-process=image/format,webp",
        },
      ],
    };
  },
  methods: {
    stopCar() {
      uni.navigateTo({
        url: "/subpages/index/carId/carId",
      });
    },
    map() {
      uni.navigateTo({
        url: "/subpages/index/map/map",
      });
    },
    reservation() {
      uni.navigateTo({
        url: "/subpages/my/reservation/list",
      });
    },
    feedback() {
      uni.navigateTo({
        url: "/subpages/my/feedback/feedback",
      });
    },
  },
  onShareAppMessage() {
    return share;
  },
};
</script>

<style>
.header {
  width: 100%;
  background-size: 100% 400rpx;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
.bg {
  width: 100%;
  height: 70%;
  background-color: #377aff;
  position: absolute;
  top: 0;
  left: 0;
}
.header__box {
  box-sizing: border-box;
  padding: 0 24rpx;
}
.swiper {
  width: 100%;
  height: 288rpx;
  border-radius: 22rpx;
  overflow: hidden;
  margin-top: 24rpx;
  margin-bottom: 24rpx;
}
.swiper__item,
.swiper__image {
  width: 100%;
  height: 100%;
}
.content {
  box-sizing: border-box;
  padding: 0 24rpx;
  overflow-x: hidden;
}
.tools {
  display: flex;
  margin-bottom: 28rpx;
}
.tools__item {
  width: 25%;
  color: #333333;
  font-size: 26rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tools__img {
  width: 100rpx;
  height: 116rpx;
  margin-bottom: 8rpx;
}
.news {
  width: 100%;
  background-color: #fff;
  border-radius: 22rpx;
  box-sizing: border-box;
  padding: 24rpx;
  font-size: 24rpx;
  color: #aaaaaa;
  display: flex;
  line-height: 38rpx;
  margin-bottom: 24rpx;
}
.news__title {
  font-size: 28rpx;
  color: #222222;
  margin-bottom: 16rpx;
  font-weight: bold;
}
.news__img {
  min-width: 180rpx;
  width: 180rpx;
  height: 128rpx;
  border-radius: 10rpx;
  margin-left: 28rpx;
}
.shop {
  width: 100%;
  background-color: #fff;
  margin-bottom: 24rpx;
  border-radius: 22rpx;
  box-sizing: border-box;
  padding: 26rpx 20rpx 20rpx 20rpx;
}
.shop__title {
  font-size: 28rpx;
  color: #222222;
  font-weight: bold;
}
.shop__img {
  width: 100%;
  height: 288rpx;
  border-radius: 14rpx;
  margin-top: 24rpx;
}
</style>
